<template>
  <div style="margin: 20px;width: 300px;">
    <el-breadcrumb separator="/">
        <!-- 动态生成的面包屑 -->
         <el-breadcrumb-item :to="{path:'/layout/home'}" 
       >首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name:item.name}" v-for="item in breadList"
        :key="item.name">{{item.meta.title}}</el-breadcrumb-item>
   
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumb',

  data() {
    return {
      breadList:[]
    };
  },
  watch:{ //watch 监听data数据，监听props数据 ，监听路由

    // $route:{
    //   handler(newVal){
    //     console.log(newVal,"------------")
    //     this.breadList= newVal.matched.slice(1);
    //     console.log( this.breadList,"-0----------")
    //   },
    //   deep:true
    // }
  },
  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style scoped>

</style>